<template>
	<navigator url="../../pages/RenHistory/RenHistory">
	   <uni-section title="人员流量(今日)" type="line" style="margin-bottom: 3px;">
		<image src="../../static/mipmap-xxxhdpi/icon_next.png" mode=""
			style="width: 20rpx;height: 30rpx;float: right;margin-top: -23px;margin-right: 5px;"></image>
		<span>历史记录</span>
	   </uni-section>
	</navigator>
	<view class="charts-box">
		<qiun-data-charts type="tarea" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
    import { defineComponent, ref, onMounted } from 'vue';
    import { Solar } from '@/utils/file.js';

    const chartData = ref({});
    const opts = ref({
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272"],
      padding: [15, 10, 0, 15],
      dataLabel: false,
      dataPointShape: false,
      enableScroll: false,
      dataPointShapeType: "solid",
      legend: {},
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2,
        data: [],
        splitNumber: 6
      },
      extra: {
        line: {
          type: "curve",
          width: 2,
          activeType: "hollow",
          linearType: "custom",
          onShadow: true,
          animation: "horizontal"
        }
      }
    });

    const getServerData = () => {
      // 模拟从服务器获取数据时的延时
      Solar(uni.getStorageSync('token')).then(resData => {
        console.log(resData, "人员流量");
        setTimeout(() => {
		  let pm10Data = resData.data.renyuan_result.data.map(item => item.women);
       
          let max = Math.max(...pm10Data); // 计算最大值

          let data = {
            categories: resData.data.renyuan_result.data.map(item => item.human_time),
            series: [
              {
                name: "男",
                linearColor: [
                  [0, "#1890FF"],
                  [0.25, "#00B5FF"],
                  [0.5, "#00D1ED"],
                  [0.75, "#00E6BB"],
                  [1, "#90F489"]
                ],
                data: resData.data.renyuan_result.data.map(item => item.man)
              },
              {
                name: "女",
                data: resData.data.renyuan_result.data.map(item => item.women)
              }
            ]
          };

          opts.value.yAxis.data = [{
            min: 0,
            max: Math.ceil(max)
          }];

          chartData.value = JSON.parse(JSON.stringify(data));
        }, 500);
      });
    };

    onMounted(() => {
      getServerData();
    });

</script>

<style scoped lang="scss">
	$nav-height: 30px;

	.charts-box {
		width: 100%;
		height: 230px;
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;

	}

	span {
		display: inline-block;
		float: right;
		margin-right: 20px;
		margin-top: -24px;
	}
</style>